{% comment %}
    Renders a product card

    Accepts:
    - product_card_product: {Object} Product Liquid object (optional)
    - media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
    - add_image_padding: {Boolean} Enables padding on the image to space out the grid
    - show_vendor: {Boolean} Show the product vendor. Default: false
    - show_image_outline: {Boolean} Show card outline. Default: true (optional)
    - show_rating: {Boolean} Show the product rating. Default: false

    Usage:
    {% render 'product-card', show_vendor: section.settings.show_vendor %}
{% endcomment %}

<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

<div class="card-wrapper">
  <div class="card-information">
    <div class="card-information__wrapper">
      {%- if show_vendor -%}
        <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
        <div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
      {%- endif -%}

      {%- if product_card_product.featured_media -%}
        <h3 class="card-information__text h5">
          <a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
            {{ product_card_product.title | escape }}
          </a>
        </h3>
      {%- endif -%}

      {% comment %} TODO: metafield {% endcomment %}
      <span class="caption-large light">{{ block.settings.description | escape }}</span>
      {%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
        {% liquid
          assign rating_decimal = 0 
          assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1 
          if decimal >= 0.3 and decimal <= 0.7
            assign rating_decimal = 0.5
          elsif decimal > 0.7
            assign rating_decimal = 1
          endif 
        %}
        <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}">
          <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
        </div>
        <p class="rating-text caption">
          <span aria-hidden="true">{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}</span>
        </p>
        <p class="rating-count caption">
          <span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
          <span class="visually-hidden">{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
        </p>
      {%- endif -%}

      {% render 'price', product: product_card_product, price_class: '' %}
    </div>
  </div>

  <div class="card card--product{% if product_card_product.featured_media == nil %} card--text-only card--soft{% endif %}{% if product_card_product.featured_media != nil and show_image_outline %} card--outline{% endif %}" tabindex="-1">
    <div class="card__inner">
      <a href="{{ product_card_product.url | default: '#' }}">
      {%- if product_card_product.featured_media -%}
        {%- liquid
          assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio

          if product_card_product.featured_media.aspect_ratio == nil
            assign featured_media_aspect_ratio = 1
          endif
        -%}

        <div{% if add_image_padding %} class="card__media-full-spacer"{% endif %}>
          <div class="media media--transparent media--{{ media_size }} media--hover-effect"
            {% if media_size == 'adapt' and product_card_product.featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}
          >
            <img
              srcset="{%- if product_card_product.featured_media.width >= 148 -%}{{ product_card_product.featured_media | img_url: '148x' }} 148w,{%- endif -%}
              {%- if product_card_product.featured_media.width >= 167 -%}{{ product_card_product.featured_media | img_url: '167x' }} 167w,{%- endif -%}
              {%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
              {%- if product_card_product.featured_media.width >= 375 -%}{{ product_card_product.featured_media | img_url: '375x' }} 375w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
                {{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"
              src="{{ product_card_product.featured_media | img_url: '533x' }}"
              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
              alt="{{ product_card_product.featured_media.alt | escape }}"
              loading="lazy"
              class="motion-reduce"
              width="{{ product_card_product.featured_media.width }}"
              height="{{ product_card_product.featured_media.height }}"
            >
            {%- if product_card_product.media[1] != nil and show_secondary_image -%}
              <img
                srcset="{%- if product_card_product.media[1].width >= 148 -%}{{ product_card_product.media[1] | img_url: '148x' }} 148w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 167 -%}{{ product_card_product.media[1] | img_url: '167x' }} 167w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: '360x' }} 360w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 375 -%}{{ product_card_product.media[1] | img_url: '375x' }} 375w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: '533x' }} 533w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: '940x' }} 940w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: '1066x' }} 1066w,{%- endif -%}
                  {{ product_card_product.media[1] | img_url: 'master' }} {{ product_card_product.media[1].width }}w"
                src="{{ product_card_product.media[1] | img_url: '533x' }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                alt="{{ product_card_product.media[1].alt | escape }}"
                loading="lazy"
                class="motion-reduce"
              width="{{ product_card_product.media[1].width }}"
              height="{{ product_card_product.media[1].height }}"
              >
            {%- endif -%}
          </div>
        </div>
      {%- else -%}
        <div class="card__content">
          <h2 class="card__text h3">
            <a href="{{ product_card_product.url | default: '#' }}">
              {{ product_card_product.title }}
            </a>
          </h2>
        </div>
      {%- endif -%}

      <div class="card__badge">
        {%- if product_card_product.available == false -%}
          <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
        {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
          <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
        {%- endif -%}
      </div>
      </a>
    </div>
    <div class="add_to_cart add_none">
      {%- assign product_form_id = 'product-form-' | append: section.id -%}
      
    
      <product-form class="product-form">
        <div class="product-form__error-message-wrapper" role="alert" hidden>
          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
            <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
            <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
            <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
            <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
          </svg>
          <span class="product-form__error-message"></span>
        </div>
    
        {%- form 'product', product_card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
          <input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">
          <div class="product-form__buttons">
            <button
              type="submit"
              name="add"
              class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product_card_product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
            {% if product_card_product.selected_or_first_available_variant.available == false %}disabled{% endif %}
            >
                <span>
                  {%- if product_card_product.selected_or_first_available_variant.available -%}
                  {{ add_to_cart }}
                  {%- else -%}
                    {{ 'products.product.sold_out' | t }}
                  {%- endif -%}
                </span>
                <div class="loading-overlay__spinner hidden">
                  <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                    <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                  </svg>
                </div>
            </button>
          </div>
        {%- endform -%}
      </product-form>
    
    </div>
  </div>
 
</div>
